<template>
  <!--   连接线   -->
  <svg
    v-if="edge"
    class="edge-svg"
    :class="{ 'line-highlight': highlight }"
    :style="{
      height: lineContainerHeight,
      width: lineContainerWidth,
      left: edge.x + 'px',
      top: edge.y + 'px',
    }"
  >
    <!-- line  -->
    <path
      :d="getPathD"
      class="line-cls"
      marker-end="url(#arrowhead)"
      :style="{
        'stroke-width': '3px',
        stroke: '#b6bdd2',
        fill: 'none',
      }"
    />
    <!-- 箭头 -->
    <path :d="getPathArrow" class="line-cls" />
  </svg>
</template>

<script lang="ts">
/**
 * 关系连接线封装
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class LineOfRelationalConnection extends Vue {
  // 连接线信息
  @Prop() edge!: any
  // 节点高度
  @Prop({ type: Number, default: 0 }) nodeHeight!: number
  // 节点宽度
  @Prop({ type: Number, default: 0 }) nodeWidth!: number
  // 差值宽
  @Prop({ type: Number, default: 0 }) differenceOfGridWidth!: number
  // 差值高
  @Prop({ type: Number, default: 0 }) differenceOfGridHeight!: number
  // 高亮
  @Prop({ type: Boolean, default: false }) highlight!: boolean
  // 高亮
  @Prop({ type: String, default: '' }) lineStatus!: string

  // 连接线 宽度
  public strokeWidth = 1

  // 路径的 4个位置点
  private PathPositionPoint: any = {
    point1: { x: 0, y: 0 },
    point2: { x: 0, y: 0 },
    point3: { x: 0, y: 0 },
    point4: { x: 0, y: 0 },
  }

  /**
   * 连接线 svg  height,
   */
  public get lineContainerHeight() {
    return 40
  }

  /**
   * 连接线 svg  width
   */
  public get lineContainerWidth() {
    return Math.abs(this.edge.startEndPos.xEnd - this.edge.startEndPos.xStart)
  }

  /**
   * 连接线 路径
   */
  public get getPathD() {
    const { isLeft } = this.edge
    const startPos = {
      x: this.edge.startEndPos.xStart,
      y: this.edge.startEndPos.yStart,
    }
    const endPos = {
      x: this.edge.startEndPos.xEnd,
      y: this.edge.startEndPos.yEnd,
    }
    // 连接线四个点
    const point1 = {
      x: startPos.x,
      y: startPos.y + 20 - 5,
    }
    const point2 = {
      x: isLeft ? point1.x - 5 : point1.x + 5,
      y: point1.y + 5,
    }
    const point3 = {
      x: endPos.x + this.nodeWidth / 2 + 5,
      y: endPos.y - 20,
    }
    const point5 = {
      x: endPos.x - this.nodeWidth / 2 - 5,
      y: endPos.y - 20,
    }
    const point4 = { x: endPos.x + this.nodeWidth / 2, y: endPos.y - 20 + 5 }
    const point6 = { x: endPos.x - this.nodeWidth / 2, y: endPos.y - 20 + 5 }
    this.PathPositionPoint = { point1, point2, point3, point4 }
    return `
      M${startPos.x},${startPos.y}
      L${point1.x},${point1.y}
      A 5 5 0 0, ${isLeft ? 1 : 0} ${point2.x} ${point2.y}
      L${isLeft ? point3.x : point5.x}, ${point3.y}
      A 5 5 0 0, ${isLeft ? 0 : 1} ${isLeft ? point4.x : point6.x} ${point4.y}
      L${isLeft ? point4.x : point6.x},${endPos.y} 
     `
  }

  /**
   * 连接线 箭头
   */
  private get getPathArrow() {
    const { isLeft } = this.edge
    const endPos = {
      x: this.edge.startEndPos.xEnd + ((isLeft ? 1 : -1) * this.nodeWidth) / 2,
      y: this.edge.startEndPos.yEnd,
    }
    return `
    M${endPos.x - 5},${endPos.y - 5}
    L${endPos.x},${endPos.y}
    M${endPos.x},${endPos.y}
    L${endPos.x + 5},${endPos.y - 5} 
  `
  }
}
</script>

<style scoped lang="less">
/* 连接线 */
.edge-svg {
  pointer-events: none;
  position: absolute;
  z-index: 40;
  /*transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;*/
  /*transition-property: width, height, left, top;*/
  &:hover {
    z-index: 50;
  }

  .line-cls {
    fill: none;
    stroke: #9b9da8;
  }

  .line-cls-hover {
    cursor: pointer;
    fill: none;
    stroke: transparent;
  }

  .add-btn {
    cursor: pointer;
    fill: transparent;
  }

  path {
    pointer-events: all;
    /*transition: all 0.2s;*/
  }
}

.line-highlight {
  z-index: 45;
}
</style>
